antd |
您所在的位置：网站首页 › antd vue mobile › antd |
antd
|
在此前发布的Antd Mobile Vue的基础上进行了vue3.0的升级 这是目前为止Ant Design Mobile移植到Vue最完整的组件库 新增部分v5组件移植 如有问题可添加个人微信（wuhao1200），欢迎共同交流
查看文档 antd-mobile-vue基于 Vue3 的组件库，代码由antd-mobile转为Vue版本，目前已具备antd-mobile的绝大部分组件 部分组件的示例已和 ant design mobile 官网同步 与antd-mobile的组件对比 antd-mobile 共有 47个组件，本项目截至现在移植了44个, 组件完成度达到95% antd-mobile V5 共有 58个组件(不含ConfigProvider)，本项目截至现在移植了51个, 组件完成度达到88% 与ant design mobile的组件比较 组件名称 antd-mobile antd-mobile-vue 示例移植 说明 Accordion √ √ √ ActionSheet √ √ √ ActivityIndicator √ √ √ Badge √ √ √ Button √ √ √ Calendar √ √ √ Card √ √ √ Carousel √ √ √ Checkbox √ √ √ DatePicker √ √ √ DatePickerView √ √ √ Drawer √ √ √ Empty √ √ √ Flex √ √ √ Grid √ √ Icon √ √ √ ImagePicker √ √ InfiniteScroll √ v √ InputItem √ v √ List √ √ √ ListView √ [无] Loading √ √ √ Mask √ √ √ Menu √ √ √ Modal √ √ √ NavBar √ √ √ NoticeBar √ √ √ Pagination √ √ √ Picker √ √ √ PickerView √ √ Popover √ √ √ Progress √ √ √ Radio √ √ √ PullToRefresh √ √ √ Result √ √ √ SearchBar √ √ SegmentedControl √ √ √ Space √ √ √ Slider √ √ √ Range √ √ √ Stepper √ √ √ Steps √ √ √ SwipeAction √ √ Switch √ √ TabBar √ √ √ Tabs √ √ √ Tag √ √ √ TextareaItem √ √ √ Toast √ √ √ WhiteSpace √ √ √ WingBlank √ √ √ LocaleProvider √ [无] AutoCenter √ CapsuleTabs √ Cascader √ CascaderView √ Dropdown √ Ellipsis √ FloatingBubble √ ErrorBlock √ FloatingPanel √ Image √ ImageViewer √ ImageUploader √ IndexBar √ JumboTabs √ NumberKeyboard √ PasscodeInput √ ProgressCircle √ SafeArea √ Selector √ Skeleton √ SideBar √ Swiper √ TreeSelect √ VirtualInput √ WaterMark √ 安装 npm i antd-mobile-vue-next -S 使用 import AntdMobile from 'antd-mobile-vue-next' app.use(AntdMobile) 按需引入按需加载需要借助babel-plugin-import, 这样就可以只引入需要的组件，以减小项目体积 npm i babel-plugin-import -D将babel.config.js修改为： module.exports = { presets: ['@vue/app'], plugins: [ [ 'import', { libraryName: 'antd-mobile-vue-next', libraryDirectory: 'es', style: true }, 'antd-mobile-vue-next' ] ] };引入组件 import { Alert } from "antd-mobile-vue-next"; defineComponent({ components: { [Alert.name]: Alert } }); 开发环境启动 npm run dev 打包 npm run build 发布到npm仓库 npm publish |
【本文地址】